import { ICheck } from '@/api'
import { Management } from '@/enums'
import styles from './index.module.less'
import { Progress } from '@/components'

export const CheckResultText = ({ status }: { status: ICheck.RULE_CHECK }) => {
  return (
    <span className={styles.text} style={{ color: Management.RULE_CHECK_COLOR[status] }}>
      {status}
    </span>
  )
}

const IconMap = {
  [Management.RULE_CHECK['未校验']]: null,
  [Management.RULE_CHECK['校验中']]: <Progress className={styles.spin} type="circle" percent={75} showInfo={false} />,
  [Management.RULE_CHECK['校验成功']]: <Progress type="circle" percent={100} />,
  [Management.RULE_CHECK['校验失败']]: <Progress type="circle" percent={100} status="exception" />
}

export const CheckResult = ({ status, style }: { status: ICheck.RULE_CHECK; style?: React.CSSProperties }) => {
  return (
    <div className={styles.container} style={style}>
      {IconMap[status]}
      <CheckResultText status={status} />
    </div>
  )
}
